﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestJQuery.aspx.cs" Inherits="WebApplication2.TestJQuery" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>JQuery test page</title>
    <style type="text/css">
        th
        {
            text-align: left;
        }
        .headerRow
        {
            background-color: #000000;
            color: White;
            font-weight: bold;
        }
        .highlightRow
        {
            background-color: #dadada;
            cursor: pointer;
            border: solid 1px black;
        }
        .selectedRow
        {
            background-color: #808080;
            cursor: pointer;
            border: solid 1px black;
            color: White;
        }
    </style>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var previous;

            $('#GridView1 thead').addClass('headerRow');

            $('#GridView1 tbody tr').mouseover(function () {
                $(this).addClass('highlightRow');
            });

            $('#GridView1 tbody tr').mouseout(function () {
                $(this).removeClass('highlightRow');
            });

            $('#GridView1 tbody tr').click(function () {
                $(".selectedRow").removeClass('selectedRow');
                $(this).toggleClass('selectedRow');
                
            });

        }); 
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridView1" runat="server" BackColor="White" Font-Size="10" Font-Names="Verdana"
            BorderColor="#000000" BorderStyle="Solid" BorderWidth="1px" CellPadding="3" Width="400px"
            CellSpacing="0" GridLines="Horizontal">
        </asp:GridView>
    </div>
    </form>
</body>
</html>
